<template>
  <div class="fa-panel">
    <header class="fa-panel__hd">
      <slot name="header">
        <h3 class="fa-panel__hd-title">{{ title }}</h3>
      </slot>
    </header>

    <div class="fa-panel__bd">
      <slot />
    </div>

    <slot name="footer" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

/** 面板 */
export default defineComponent({
  name: 'FaPanel',

  props: {
    /** 标题 */
    title: {
      type: String,
      default: ''
    }
  }
})
</script>

<style lang="scss">
// 面板
.fa-panel {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: #fff;

  &__hd {
    $space: 16px;
    flex: none;
    box-sizing: border-box;
    height: $panel-header-height;
    padding: 0 $space;
    line-height: $panel-header-height;
    background: rgba($color-primary-lightest, 0.5);

    &-title {
      float: left;
      margin: 0;
      color: $color-text-primary;
      font-weight: 700;
      font-size: 12px;
    }

    &-desc {
      float: right;
      margin: 0;
      color: $color-text-secondary;
      font-size: 12px;
    }
  }

  &__bd {
    flex: auto;
    box-sizing: border-box;
    height: calc(100% - $panel-header-height);
    overflow: auto;
  }
}
</style>
